<!doctype html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport"
          content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>ABC</title>
    <style>
        * {
            margin: 0;
            padding: 0;
            background-color: transparent;
        }

        #msgbox, #title {
            padding: 20px;
            min-width: 300px;
        }

        /*固定字体大小、倾斜*/
        .fi {
            font-style: italic;
            font-size: 20px;
        }

        .lt {
            position: fixed;
            top: 0;
            left: 0;
            z-index: 9999;
        }

        .lb {
            position: fixed;
            bottom: 0;
            left: 0;
        }

        .bgc {
            background-color: transparent;
        }

        /*输入框无边框、透明*/
        .ti {
            border: none;
            background-color: transparent;
        }

        .ti:focus {
            outline: none;
        }

        /*大屏幕：无焦点时变为透明*/
        @media screen and (min-width: 768px) {
            .fo {
                opacity: 0.25;
                transition: opacity 0.3s ease;
            }

            .fo:hover {
                opacity: 1;
            }
        }

        /*下划线*/
        .u {
            text-decoration: underline;
        }

        /*渐变*/
        .gr {
            color: transparent;
            background: linear-gradient(225deg, #FF3CAC 0%, #784BA0 50%, #2B86C5 100%);
            -webkit-background-clip: text;
        }
    </style>
</head>
<body>
<div id="title" class="lt bgc fi">
    <div id="online"></div>
    <div id="countdown"></div>
    <script>
        function updateCountdown() {
            let now = new Date();
            let targetTime = new Date();
            targetTime.setHours(18, 0, 0, 0); // 设置时分秒毫秒为18:00:00.000

            let timeDiff = targetTime.getTime() - now.getTime();

            if (timeDiff <= 0) {
                document.getElementById("countdown").innerHTML = "倒计时结束";
                return;
            }

            let hours = Math.floor(timeDiff / (1000 * 60 * 60));
            let minutes = Math.floor((timeDiff % (1000 * 60 * 60)) / (1000 * 60));
            let seconds = Math.floor((timeDiff % (1000 * 60)) / 1000);
            let milliseconds = timeDiff % 1000;

            document.getElementById("countdown").innerHTML = `${hours}h ${minutes}m ${seconds}s ${milliseconds}ms`;
            setTimeout(updateCountdown, 1);
        }

        updateCountdown();
    </script>
</div>
<div id="msgbox" class="lb bgc fi fo">
    <div id="msg-list"></div>
    <label>
        <input type="text" id="msg-name" class="ti fi" size="6" placeholder="名字" value="匿名"/>
        <input type="text" id="msg-ct" class="ti fi"
               onkeydown="if(event.keyCode===13){wsSend()}"
               placeholder="输入..."/>
    </label>
</div>
<script>
    // 设置随机名字
    (function randomMsgName() {
        let names = ['石皎洁', '郜吉望', '徐坤剑', '汤风昶', '李思远', '穆林暖', '窦或俪', '瞿衡蓬', '卫沛晟', '姬敬富', '乔翰滨', '蓬垒丁', '郜文旦', '郑洋绚', '谭惠一', '邴菲杨', '潘策西', '方通锬', '贾蔓瑶', '施轩为', '许娉芯', '尹妙眉', '劳璐欢', '黄希韵', '牧羿总', '陆令岚', '葛燕竹', '张贝晗', '韶琥', '侯恋杏', '廉颢争', '计慧寒', '郭桃朦', '班习莎', '仰薇容', '虞茵', '虞非添', '严峰德', '幸勤', '常煜煊', '萧琚梅', '王枫晗', '幸滨哲', '董真育', '凌盟功', '赵鉴伟', '仰鸽璐', '沈昌彦', '尤熹隽', '巫泉泓', '解逸莹', '毕玉曦', '尤崇雍', '杭桑歆', '戚滢菲', '秦桢继', '黎想佩', '苏婧汝', '董迁棋', '柯嫒雅', '周平强', '孟海妙', '乌淳花', '丁重', '徐丰贵', '彭羿城', '祝队响', '霍菱霞', '郭霜', '施瑜淳', '陆庆甫', '华浩辉', '卢斐悦', '田玲皎', '霍璇爱', '史垚成', '皮盈沙', '凌姬萌', '姬苏蔚', '田杉如', '余青炜', '倪秀文', '尹雯', '伊嫣展', '方洋轶', '韶舒凡', '何岭泳', '侯灿原', '凌舒昭', '庞欢元', '纪振耘', '徐彬山', '程舟香', '周骊椒', '尚丞岗', '倪萱绮', '农影情', '高焱柏', '岑城淳', '祁钦雍', '乌椒伊', '王婧花', '万舟姝', '白莺会', '包银炜', '邵子耘', '苏京卉', '晏旭川', '郭冰震', '时升波', '诸岑开', '宣殉慧', '高敏榕', '赖蔓然', '傅吉朗', '蔡霁霁', '俞鲲涌', '庞莹骊', '杭茜葵', '秋心波', '卢聪琼', '施娆甜', '缪蓓情', '萧柯裕', '彭勋辛', '左或萱', '班岚蔚', '秦双霞', '邵茹跃', '柯韦运', '陈予妲', '符凌铮', '裴晋理', '汪唯和', '牧昌梁', '方燕含', '荣月蔷', '孔淼冕', '高嫒曼', '廉烈逊', '蔡烁宁', '娄宇柏', '周如君', '宣联汉', '虞眉戈', '鲍轩益', '常俭翌', '宫锋默', '邱征琛', '武媚洁', '韦桥泰', '童冶璇', '胡轶晔', '卫存贤', '平欣荟', '班逸林', '羿辉领', '单戈艾', '唐悦鹃', '蒋轶珠', '郭晶樱', '诸熙女', '韩研轶', '富曦跃', '管墨', '杜晴心', '柏民柱', '毛轶丽', '巫珠嫱', '左恋', '管湘曼', '任路桑', '郭薇喜', '杭尤晓', '汤莎辰', '翁蕴泳', '蒋凤娓', '萧漪霓', '唐玉凌', '邹妮乐', '怀润盈', '汤恒硕', '阮畏川', '宣锋灿', '仰舒争', '庞升革', '谢妍巧', '武昆昊', '杨立菁', '郭影荟', '黄中原', '郦惠葵', '祖熠丽', '诸钥虹', '屈漪舟', '巫旭霁', '束椒靖', '颜融璋', '瞿林韶', '祖荟', '刘明曦', '唐程燃', '姬涛昆', '惠天栋', '韶园任', '魏红剑', '尚嫣洵', '张继毓', '崔铮煦', '张言', '王鼎天', '柏为游', '成霏馨', '周舒璐', '支恬翠', '焦蒙妹', '邴凝跃', '翁里葵', '张海闽', '洪印烁', '汤杰友', '潘暖毓', '仰宗举', '华旺展', '黎秦楷', '宫旦昊', '尚彭起', '方侃婉', '薄予依', '宋莺谨', '富帆煜', '叶红美', '薄燕珣', '祁丰朗', '劳攀彭', '郑宜冰', '蒙洵祺', '张如昆', '夏裕珂', '计娇忆', '滑旖歆', '焦韶展', '郭帅曙', '郜茉连', '宫强铭', '支鹭默', '祖一蔚', '温星奇', '郎秋钰', '成葵根', '郜滔茂', '姚会令', '龚章燃', '崔涓馨', '贾椒灏', '吉昀京', '郜美笑', '殷典乾', '卫娓熙', '骆非延', '戚德敬', '娄想隽', '罗安浪', '傅耘景', '郎娆乐', '奚章策', '焦嫒月', '蒋萌莺', '华习', '费卿霜', '穆子桃', '朱晗彩', '张千漫', '倪桢玉', '郎原望', '万品霞', '任钟傲', '时晶维', '温格艳', '窦立晨', '井松连', '夏真蓉', '蓬盛逊', '单禄源', '屈泳良', '符锨龙', '魏竹晶', '方汝幸', '施飚珂', '林柳翼', '殷声珂', '束尤', '黎高创', '萧舸稳', '傅忻梓', '傅理韶', '余苓绚', '乔佩为', '方茉娅', '邬莹虹', '金勃楚', '荣显栋', '屈杨星', '尹桢轩', '薛娥桐', '井臻勃', '朱云多', '洪淮骅', '鲍彩仪', '温朝灿', '戚女莉', '屈情蓉', '单迅可', '袁璞运', '宣子冶', '房献庚', '史腾椒', '莫宜俊', '甄歌皎', '伍煊方', '毕翠蕴', '庞苏日', '韶默', '彭剑巧', '包妹桃', '顾娆澄', '劳忻爽', '娄蕾菲', '姜芹芳', '费琴', '甄达碧', '贾威爽', '卢娴鹭', '鲁磊兴', '卫茵习', '霍妙涓', '凌婕迅', '华欣焰', '伏韧艺', '荣希迎', '黎宜子', '蒋景阳', '柯熙李', '刘谦烽', '吉蔷伶', '郑梦', '吴千赫', '毛澜弘', '丁斐凌', '农嫚', '蓬惠淳', '裴丹', '申娟品', '羿尚来', '苗毓莺', '刘旋田', '左灵菲', '雷罡天', '农山平', '陆伶莲', '薛吟轶', '石晨清', '劳贞纳', '段秋颢', '鲍伊毓', '钟忱优', '蓬椒巧', '尚卉泽', '滑昀舟', '奚允琪', '何蔷玫', '滕楠园', '牧真越', '崔柳化', '井红妃', '花冰雁', '杨瑶或', '盛星旎', '盛仁', '刁可瑛', '殷继旋', '郜沙芹', '邢蕾芳', '韶宸', '咎纪峥', '郁娉甜', '柯艾琦', '谭鹭依', '伊兴煦', '惠仪可', '班欢凡', '田娇芯', '秋茉立', '强楷赛', '经珂建', '仲蕙滢', '顾兰汝', '梅岗', '徐孟韧', '武琪冶', '骆宽思', '窦旭曦', '柳嵘幸', '任仁弘', '贾驰昌', '宣泓泳', '雷想洋', '秦俭逊', '段含琴', '董佳珺', '刘蕊靓', '韩根枫', '明耿鹏', '龙默会', '倪嫒睿', '羿芸嘉', '祝馨爽', '张赫意', '詹稳帆', '柯信柏', '俞润赢', '姜怡习', '任实财', '冯骥哲', '陆尧淞', '方海松', '刁佳雍', '岑卓迎', '黄瑾', '殷暖翠', '郦灵蔚', '黎露竹', '祝媛如', '毛泽蝶', '俞实锴', '宣旖歆', '成颉逸', '胡宸炳', '马军东', '吉湘情', '时栩', '平露伶', '穆赛屹', '阮习柱', '裴娓铃', '蒋越默', '邹娇绚', '孟胤垚', '宋泽玲', '郝珑鲲', '朱戈苏', '宋游星', '邬韦灵', '仰鹃蔷', '蓬澄羚', '幸博天', '明化江', '农定令', '舒榕', '井望印', '刘沛娴', '黎帅连', '祖嫱静', '叶响典', '郝歆忆', '纪娥秀', '温丹书', '雷露煦', '孔鹭甜', '戴薇鲁', '蒋俪维', '温林卉', '庞敏岭', '晏树', '吉炯梦', '左嵘彬', '伊洁然', '齐峰忱', '诸鹏然', '崔菲岚', '惠秋德', '马薇江', '农璇琳', '朱瑶婧', '谢其其', '顾意虹', '薛臣鹏', '史霜妙', '凌越原', '叶沙焕', '杜露莎', '柳维珊', '柯含盈', '樊墩讳', '邴多宁', '皮珑荟', '秋春娣', '倪椒舒', '杭翠恬', '梅默谨']
        let msgName = document.getElementById("msg-name")

        // 获取随机数0到123
        function getRandomInt(min, max) {
            min = Math.ceil(min);
            max = Math.floor(max);
            return Math.floor(Math.random() * (max - min)) + min; //不含最大值，含最小值
        }

        msgName.value = names[getRandomInt(0, names.length)]
    })()

    // 获取url里的参数
    function getQueryVariable(variable) {
        let query = window.location.search.substring(1);
        let vars = query.split("&");
        for (let i = 0; i < vars.length; i++) {
            let pair = vars[i].split("=");
            if (pair[0] === variable) {
                return pair[1];
            }
        }
        return "default";
    }

    let c = getQueryVariable("c");

    let ws = new WebSocket("wss://www.hei.asia:8765?c=" + c);

    ws.onopen = () => {
        console.log("已连接到服务器");
    };

    ws.onmessage = (event) => {
        let data = JSON.parse(event.data);
        switch (data.type) {
            case "user_count":
                document.getElementById("online").innerText = "" + c + " " + (data.count) + "";
                break;
            case "message":
                console.log("收到消息：" + data.content)
                // if (data.content.includes("mao")) {
                //     document.body.style.background = "url('static/mao-" + getRandomInt(1, 26) + ".jpg') no-repeat";
                //     console.log("重制背景图片" + document.body.style.background)
                //     return;
                // }
                mlAppend(data.content, "msg")
                break;
            default:
                console.log("未知消息类型：" + data.type);
        }
    };

    ws.onclose = () => {
        console.log("连接已关闭");
    };

    function wsSend() {
        let messageInput = document.getElementById("msg-ct");
        let message = document.getElementById("msg-name").value + " " + messageInput.value;
        if (message) {
            ws.send(message);
            messageInput.value = ""; // 清空输入框
        }
    }

    function mlAppend(content, ...clazz) {
        let list = document.getElementById("msg-list");
        let messageElement = document.createElement("div");
        messageElement.textContent = content;
        for (let c of clazz) {
            messageElement.classList.add(c);
        }
        list.appendChild(messageElement);
        list.scrollTop = list.scrollHeight; // 滚动到底部
    }

    function getRandomInt(min, max) {
        min = Math.ceil(min);
        max = Math.floor(max);
        return Math.floor(Math.random() * (max - min)) + min; //不含最大值，含最小值
    }


    // fake msgs
    // setTimeout(() => {
    //     mlAppend("已启用匿名", "msg", "gr")
    // }, 500);
    // setTimeout(() => {
    //     mlAppend("已启用会话加密", "msg", "gr")
    // }, 750);
    // setTimeout(() => {
    //     mlAppend("无法启用音视频对话（网络环境不安全）", "msg", "gr")
    // }, 3000);
</script>
</body>
</html>